<template lang="pug">
  div.table-empty
    s-table(
      ref="table"
      reqMethod="get"
      :reqUrl="reqUrl"
      :column="tableObj.column"
      v-if="$route.path === '/finance/refund/record'"
      :filterProps="{ fields: searchField }"
      :selection="false"
      @selection-change="rows => selectedRows = rows"
    )
      .table-operator(slot="table-operator")
        el-button.gradientVertical(size="large" :disabled="selectedRows.length > 0" round @click="addHandle()") 新增
      template(slot="refundTime" slot-scope="text, scope")
        span {{text | dateFilter('YYYY/MM/DD')}}
      template(slot="action" slot-scope="text, scope")
        el-link(@click="actionHandle(scope.id, 'view')" type="default") 查看
        el-link(@click="addHandle(scope)" type="primary") 修改
    router-view(v-else)
    add-drawer(:visible.sync="modalObj.visible" :id="modalObj.id" :values="modalObj.info" @getList="() => refreshTable(true)")
    info-drawer(:visible.sync="infoObj.visible" :id="infoObj.id")
</template>
<script>
import { column } from './config'
import { mapGetters } from 'vuex'
import { getClassesByArea } from '@/api/common'
import AddDrawer from './components/addDrawer'
import InfoDrawer from './components/infoDrawer'
export default {
  components: {
    AddDrawer,
    InfoDrawer
  },
  data () {
    return {
      tableObj: {
        column
      },
      tableData: [],
      selectedRows: [],
      classes: [],
      classId: '',
      childName: '',
      modalObj: {
        id: '',
        visible: false,
        info: {}
      },
      infoObj: {
        visible: false
      }
    }
  },
  computed: {
    ...mapGetters(['curArea']),
    reqUrl () {
      return '/crm/fin/refund/list'
    },
    searchField () {
      return [
        {
          key: 'classId',
          label: '班级名称',
          type: 'select',
          fieldProps: {
            options: this.classes,
            props: { value: 'id', label: 'name' }
          }
        },
        {
          key: 'childName',
          label: '学生姓名'
        }
      ]
    }
  },
  created () {
    this.getClasses()
  },
  methods: {
    refreshTable (flag = false) {
      this.$refs.table.refresh(flag)
    },
    addHandle (scope) {
      // this.modalObj = {
      //   visible: true
      // }
      const { modalObj } = this
      this.modalObj = {
        id: scope?.id || '',
        info: scope || {},
        visible: !modalObj.visible
      }
    },
    // 获取班级列表
    async getClasses () {
      const { curArea } = this
      this.classes = await (getClassesByArea({ areaId: curArea.areaId }) || [])
    },

    actionHandle (id, type) {
      if (type === 'view') {
        this.infoObj = {
          visible: true,
          id: id
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
  .table-operator{
    margin-bottom: 18px
  }
  ::v-deep{
    .tableWrapper{
      padding: 0
    }
  }
</style>
